<template>
  <div>
    <div class="item-title">提交付款信息</div>
    <el-table :data="chargingItems" border>
      <el-table-column prop="payWay" align="center" min-width="180">
        <template slot="header" slot-scope="scope">
          收款方式<span style="color: red">*</span>
        </template>
        <template slot-scope="{ row }">
          <el-select v-model="row.payWay" clearable style="width: 180px">
            <el-option
              v-for="dict in dict.type.sys_pay_way"
              v-if="((type==2||type==3)&&dict.value==99)||dict.value!=99"
              :key="parseInt(dict.value)"
              :label="dict.label"
              :value="parseInt(dict.value)"
            />
          </el-select>
        </template>
      </el-table-column>

      <el-table-column label="收款账户" prop="payerAccount" align="center" min-width="100">
        <template slot-scope="{ row }">
          <el-input v-model="row.payerAccount"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="paidAmount" align="center" min-width="100">
        <template slot="header" slot-scope="scope">
          收款金额<span style="color: red">*</span>
        </template>
        <template slot-scope="{ row }">
          <el-input :disabled="!isEdit" v-model="row.paidAmount" @keyup.native="row.paidAmount= oninput(row.paidAmount, 2);"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="paidTime" align="center" min-width="200">
        <template slot="header" slot-scope="scope">
          收款时间<span style="color: red">*</span>
        </template>
        <template slot-scope="{ row }">
          <el-date-picker v-model="row.paidTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                          value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
                          style="width:200px;"></el-date-picker>
        </template>
      </el-table-column>

      <el-table-column prop="operator" align="center" min-width="100">
        <template slot="header" slot-scope="scope">
          经办人<span style="color: red">*</span>
        </template>
        <template slot-scope="{ row }">
          <el-input v-model="row.operator"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="备注" prop="remark" align="center" min-width="180">
        <template slot-scope="{ row }">
          <el-input v-model="row.remark"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="支付凭证" prop="voucherId" align="center" min-width="100">
        <template slot-scope="{ row }">
<!--          <el-input v-model="row.voucherId"></el-input>-->
          <ImageUpload v-model="row.url" :limit="1" :isShowTip="false"  :zoom="0.5"/>
<!--          <el-image class="preview" :src="getImgUrl(row.url)" :preview-src-list="[getImgUrl(row.url)]" fit="contain" v-else> </el-image>-->
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" v-if="isEdit">
        <template slot-scope="{ row }">
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteChargingItems(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" style="text-align: center;margin-top: 10px" v-if="isEdit">
      <el-button icon="el-icon-plus" @click="addChargingItems()" v-if="chargingItems.length<10">添加收款</el-button>
    </el-col>
  </div>
</template>
<script>

import {getUserProfile} from "@/api/system/user";
export default {
  dicts: ['sys_pay_way'],
  props: {
    type: {
      type: Number,
      default: 0
    },
    chargingItems: {
      type: Array,
      default() {
        return []
      }
    }
  },

  computed:{
    // 车损费用是否可编辑
    isEdit(){
      let isEdit = true;
      if (this.type == 15 && this.$store.state.user.isEdit==2) {
        isEdit = false
      }
      return isEdit
    }
  },


  data() {
    return {
      userName: null,
    }
  },
  mounted() {
    this.getUser()
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.userName = response.data.userName;
      });
    },
    addChargingItems() {
      this.$emit('addChargingItems',this.type)
    },
    deleteChargingItems(row) {
      let index = this.chargingItems.map(f => f.index).indexOf(row.index);
      this.$emit('deleteChargingItems',index,this.type)
    },
  },
}
</script>
<style scoped>
.item-title {
  margin: 10px;
}
</style>
